<template>
  <van-popup
    v-model="showSliderOpacityFlag"
    position='bottom'
    :round="true"
    :overlay="false"
    :duration="0.2"
    get-container="body">
    <div class="color-container">
      <!-- 透明度选择 -->
      <div class="slider-container">
        <img class="opacity-icon" src="@/assets/images/text/edit_toumingdu.png" alt="">
        <div>
          <span class="opacity-text">透明度：</span>
          <span class="opacity-num">{{ opacityNum }}%</span>
        </div>
        <div class="slider-content">
          <van-slider v-model="opacityNum" @input="changeOpacity" @drag-end="changeOpacityEnd" bar-height="4px" active-color="#AAB9E3" />
        </div>
      </div>
      <!-- 透明度选择 -->
      <!-- 关闭按钮 -->
      <div class="operation-content">
        <img @click="handleClose" class="operation-icon" src="@/assets/images/ic_btn_fold.png" alt="">
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      opacityNum: 100,
      showSliderOpacityFlag: false
    }
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'sliderOpacity') {
          footerContainerEl.style.zIndex = '2000';
          this.showSliderOpacityFlag = !this.showSliderOpacityFlag;
        } else if (oldVal === 'sliderOpacity') {
          this.showSliderOpacityFlag = false;
        }
      } 
    },
    '$store.state.design.currentSelectionElement': {
      immediate: true,
      handler(val, oldVal) {
        if (val && val.type === 'image') {
          this.opacityNum = val.opacity * 100;
        }
      } 
    },
  },

  methods: {

    // 滑动选择透明度回调值
    changeOpacity(val) {
      this.opacityNum = val;
      this.handAccountCanvas.setActiveObjectOpacity(val, 'input');
    },

    // 改变透明度
    changeOpacityEnd(val) {
      this.handAccountCanvas.setActiveObjectOpacity(this.opacityNum, 'drag-end');
    },

    // 关闭弹窗
    handleClose() {
      this.showSliderOpacityFlag = false;
      this.$emit('onClose', 'paster');
      this.handAccountCanvas.discardActiveObject();
    },
  }
}
</script>

<style lang="less" scoped>
  .color-container{
    height: 68px;
    overflow: hidden;
    padding: 0 18px;
    display: flex;
    align-items: center;

    .slider-container{
      display: flex;
      height: 30px;
      align-items: center;
      color: #AAB9E3;
      flex: 1;

      .opacity-icon{
        width: 15px;
        height: 15px;
      }

      .opacity-text{
        margin-left: 15px;
        font-size: 12px;
      }

      .opacity-num{
        display: inline-block;
        font-size: 12px;
        width: 40px;
      }

      .slider-content{
        flex: 1;
        padding-right: 24px;
      }
    }

    .operation-content{
      display: flex;
      width: 40px;
      justify-content: flex-end;
      position: relative;

      &::before{
        display: block;
        content: "";
        height: 24px;
        width: 1px;
        background: #eaeaea;
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        margin: auto;
      }

      .operation-icon{
        width: 20px;
        height: 20px;
        display: block;
      }
    }
  }
</style>
